/* ------------------------------------------------------------------------------
 *
 *  # jQuery UI Interactions
 *
 *  Separate styles for jQuery UI library. Component's interactions
 *
 *  Version: 1.1
 *  Latest update: Mar 10, 2016
 *
 * ---------------------------------------------------------------------------- */

// Misc
// -------------------------

// Handles
.ui-draggable-handle,
.ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
}

// Sortable
// -------------------------

// Base
.ui-sortable {
  .ui-state-disabled {
    color: @text-muted;
    cursor: @cursor-disabled;
    .opacity(0.75);
  }
}

// Placeholder
.sortable-placeholder {
  position: relative;

  // Background
  &:before {
    content: '';
    display: inline-block;
    background-color: fade(#fff, 80%);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px dashed fade(#000, 20%);
  }
}

//
// Sidebar placeholder
//

// Base
.sidebar {

  // Remove horizontal borders
  .sortable-placeholder:before {
    border-left: 0;
    border-right: 0;
    background-color: fade(#000, 5%);
  }
}

// Sidebar category as a helper
.sidebar-category {
  &.ui-sortable-helper {
    background-color: fade(#000, 40%);

    // Inside white sidebar
    .sidebar-default & {
      background-color: #fcfcfc;
    }
  }
}

//
// Panel placeholder
//

// Panel
.panel {
  + .sortable-placeholder {
    margin-bottom: @line-height-computed;
  }

  .sortable-placeholder + & {
    margin-top: @line-height-computed;
  }
}

// Panel group
.panel-group {
  > .sortable-placeholder:before {
    border-radius: @border-radius-base;
  }

  .panel + .sortable-placeholder {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .sortable-placeholder + .panel {
    margin-top: 5px;
  }
}

//
// Table placeholder
//

.table {

  // Helper
  .ui-sortable-helper {
    width: 100%;
    background-color: #fff;
    display: table;
  }

  // Placeholder
  .sortable-placeholder {
    margin: 0;

    // Remove placeholder border
    &:before {
      content: none;
    }
  }

  // Enadle absolute positioning
  &.ui-sortable {
    position: relative;
  }
}

// Resizable
// -------------------------

// Base
.ui-resizable {
  position: relative;

  &,
  .ui-dialog-content {
    .box-sizing(content-box);
  }
}

// Handle
.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -ms-touch-action: none;
  touch-action: none;

  // Icon
  &.ui-icon {
    display: inline-block;
    border-style: solid;
    border-width: 0 0 6px 6px;
    border-color: transparent transparent @text-color transparent;
  }

  // Hide if disabled
  .ui-resizable-disabled &,
  .ui-resizable-autohide & {
    display: none;
  }
}

// Helper
.ui-resizable-helper {
  border: 1px dashed #ccc;
}

// Handle positions
.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

// Selectable
// -------------------------

// Disable default behaviour
.ui-selectable {
  -ms-touch-action: none;
  touch-action: none;
}

// Selectable helper
.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dashed @text-color;
}

